<template>
	<view class="container">
		<view class="titile">
<!--      <image src="/static/logo.jpeg"></image>-->
			<text>门票预订</text>
		</view>

		<view class="form">
      <view class="login">
        <button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" :class="loginBtnStyle">微信一键登录</button>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: null,
				tips: '获取验证码',
				tipsStatus: 0, //0=可以获取,1=正在倒计时,2=重复获取
				tipsStyle: 'tipsStyle',
				seconds: 60,
				phone: '',
				code: '',
				loginBtnStyle: 'loginBtnStyle open',
			};
		},
		onLoad() {

		},
		watch: {
			// 如果表单正常输入则可以点击登录
			phone(newVal, oldVal) {
				if (this.$utils.checkPhone(newVal) && this.code.length >= 4) {
					this.loginBtnStyle = 'loginBtnStyle open'
				}else{
					this.loginBtnStyle = 'loginBtnStyle close'
				}
			},
			code(newVal, oldVal) {
				if (newVal.length >= 4 && this.$utils.checkPhone(this.phone)) {
					this.loginBtnStyle = 'loginBtnStyle open'
				}else{
					this.loginBtnStyle = 'loginBtnStyle close'
				}
			}
		},
		methods: {
      onGetPhoneNumber(e) {
        if(e.detail.errMsg === 'getPhoneNumber:ok') {
          uni.showLoading({
            title: '登录中...'
          })
          let that = this
          const { detail: { encryptedData, iv, code } } = e;
          wx.login({
            async success(loginRes) {
              if (loginRes.code) {
                try {
                  let _data = {
                    code: loginRes.code,
                    encryptedData,
                    iv,
                  }
                  let parentUserId = uni.getStorageSync('parentUserId')
                  if (parentUserId) {
                    _data.parent_user_id = parentUserId
                  }
                  // 发送code、encryptedData、iv到后端
                  const response = await that.$api.wxLogin(_data);
                  uni.showToast({
                    title: '登录成功',
                    icon: 'success'
                  })
                  that.$store.commit('SET_USERINFO', response)
                  setTimeout(() => {
                    // 返回
                    uni.navigateBack()
                  },500)
                } catch (error) {
                  uni.showToast({
                    title: error,
                    icon: 'none'
                  })
                  console.error('请求后端接口失败:', error);
                }
              }
            }
          })
        }
      },
		},
		onUnload() {
			// clearTime
			this.clearTimer();
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 56rpx;
	}

	.titile {
		margin-top: 100rpx;
    text-align: center;

		text {
			font-size: 48rpx;
			font-weight: bold;
			color: #262424;
		}
	}

	.form {
		margin-top: 100rpx;
	}

	.form-item {
		margin: 30rpx 0rpx;
		border-bottom: 1rpx solid #F0F0F0;

		input {
			padding: 16rpx 0rpx;
		}
		.input-placeholder {
			font-size: 30rpx;
			color: #CCC8C8;
		}
	}

	.form-item.code {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tipsStyle {
		font-size: 24rpx;
		color: #E9B921;
	}

	.tipsStyle1 {
		font-size: 24rpx;
		color: #CCC8C8;
	}

	.tipsStyle2 {
		font-size: 24rpx;
		color: #4e8ef7;
	}

	.login {
		margin-top: 50rpx;

		.loginBtnStyle {
			display: inline-block;
			width: 100%;
			color: #FFFFFF;
			font-size: 30rpx;
			border-radius: 45rpx;
			opacity: 1;
			line-height: 90rpx;
		}

		.loginBtnStyle.open {
			background: #4e8ef7;
		}

		.loginBtnStyle.close {
			background: #8CCE86;
		}
	}

	.register {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #666262;
		margin-top: 40rpx;

		image {
			width: 10rpx;
			height: 22rpx;
			margin-left: 8rpx;
		}
	}

	.bottom {
		position: fixed;
		bottom: 10%;
		left: 50%;
		transform: translate(-50%);
		text-align: center;

		text {
			font-size: 26rpx;
			color: #999393;
		}
	}

	.other {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;

		.wx {
			margin-right: 75rpx;
		}

		.qq {
			margin-left: 75rpx;
		}

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>
